Code. Learn. Build — by Gaurav Pal


Developer Portfolio Template

<!-- Developer Portfolio | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gaurav Pal | Web Developer</title>
</head>

<body>

  <header>
    <h1>Gaurav Pal's Portfolio</h1>

    <nav>
      <ul>
        <li><a href="#intro">About</a></li>
        <li><a href="#work">Projects</a></li>
        <li><a href="#connect">Contact</a></li>
      </ul>
    </nav>

  </header>

  <main>

    <section id="intro">
      <h2>About Me</h2>
      <p>
        I'm Gaurav Pal, a developer focused on building responsive and user-friendly web experiences.
      </p>
    </section>

    <section id="work">
      <h2>Projects</h2>
      <p>
        A showcase of my hands-on work and practice projects in web development.
      </p>
    </section>

    <section id="connect">
      <h2>Contact</h2>
      <p>
        Reach me at: gauravpal.dev@email.com
      </p>
    </section>

  </main>

</body>
</html>

Personal Blog Layout

<!-- Blog Layout | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gaurav Pal | Blog</title>
</head>

<body>

  <header>
    <h1>Dev Notes by Gaurav</h1>

    <nav>
      <ul>
        <li><a href="#posts">Posts</a></li>
        <li><a href="#about">About Me</a></li>
      </ul>
    </nav>

  </header>

  <section id="posts">

    <h2>Latest Articles</h2>

    <article>
      <h3>My First Website Journey</h3>
      <p>Sharing how I started building websites using pure HTML.</p>
    </article>

    <article>
      <h3>Why I Chose Web Development</h3>
      <p>A quick insight into why I love building for the web.</p>
    </article>

  </section>

  <section id="about">
    <h2>About the Author</h2>
    <p>I'm Gaurav Pal, documenting my learning and growth in tech.</p>
  </section>

</body>
</html>

Custom Contact Form

<!-- Contact Form | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Gaurav</title>
</head>

<body>

  <h1>Get in Touch</h1>

  <form action="/send-message" method="POST">

    <label>Full Name</label>
    <input type="text" name="user_name" required>

    <br>

    <label>Email Address</label>
    <input type="email" name="user_email" required>

    <br>

    <label>Your Message</label>
    <textarea name="user_message" rows="4" required></textarea>

    <br>

    <button type="submit">Send Message</button>

  </form>

</body>
</html>

Image Showcase

<!-- Image Showcase | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gallery | Gaurav</title>
</head>

<body>

  <h1>My Visual Work</h1>

  <div>
    <img src="project1.jpg" alt="Project Preview 1" width="300">
    <img src="project2.jpg" alt="Project Preview 2" width="300">
    <img src="project3.jpg" alt="Project Preview 3" width="300">
  </div>

</body>
</html>

Weekly Planner Table

<!-- Weekly Planner | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dev Schedule</title>
</head>

<body>

  <h1>My Learning Schedule</h1>

  <table border="1">

    <thead>
      <tr>
        <th>Day</th>
        <th>Focus Area</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Monday</td>
        <td>HTML Practice</td>
      </tr>

      <tr>
        <td>Tuesday</td>
        <td>Portfolio Development</td>
      </tr>

      <tr>
        <td>Wednesday</td>
        <td>JavaScript Basics</td>
      </tr>
    </tbody>

  </table>

</body>
</html>

Responsive Layout (Flexbox)

<!-- Responsive Layout | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout | Gaurav</title>

  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
    }

    .layout {
      display: flex;
      gap: 20px;
    }

    .box {
      flex: 1;
      padding: 20px;
      background: #e2e8f0;
    }

    @media (max-width: 640px) {
      .layout {
        flex-direction: column;
      }
    }
  </style>

</head>

<body>

  <h1>Flexible Layout Demo</h1>

  <div class="layout">
    <div class="box">Content Area 1</div>
    <div class="box">Content Area 2</div>
  </div>

</body>
</html>

Single Blog Entry

<!-- Blog Entry | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>First Post | Gaurav</title>
</head>

<body>

  <article>
    <h1>Getting Started with Web Development</h1>
    <p>
      This marks my first step into web development. Excited to explore, learn, and build real-world projects.
    </p>
  </article>

</body>
</html>

Developer Resume Page

<!-- Resume | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gaurav Pal | Resume</title>
</head>

<body>

  <h1>Gaurav Pal</h1>

  <section>
    <h2>Technical Skills</h2>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript (Basics)</li>
    </ul>
  </section>

  <section>
    <h2>Experience</h2>
    <p>
      Hands-on experience in building static websites and practicing frontend development concepts.
    </p>
  </section>

</body>
</html>

Cart Overview Page

<!-- Cart Page | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cart Summary</title>
</head>

<body>

  <h1>Your Cart</h1>

  <table border="1">

    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Product A</td>
        <td>$10</td>
      </tr>

      <tr>
        <td>Product B</td>
        <td>$20</td>
      </tr>
    </tbody>

  </table>

  <button>Proceed to Checkout</button>

</body>
</html>

FAQ Section

<!-- FAQ Section | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAQs</title>
</head>

<body>

  <h1>Common Questions</h1>

  <section>

    <h3>What is HTML?</h3>
    <p>HTML is the basic structure used to build webpages.</p>

    <h3>How can I start coding?</h3>
    <p>Start with HTML, practice daily, and gradually move to CSS and JavaScript.</p>

  </section>

</body>
</html>

Structured Portfolio Page

<!-- Structured Portfolio | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gaurav Pal | Portfolio</title>
</head>

<body>

  <header>

    <h1>Gaurav Pal</h1>

    <nav>
      <ul>
        <li><a href="#profile">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#reach">Contact</a></li>
      </ul>
    </nav>

  </header>

  <main>

    <section id="profile">
      <h2>About Me</h2>
      <p>
        I'm Gaurav Pal, passionate about building clean and responsive web interfaces.
      </p>
    </section>

    <section id="skills">
      <h2>Core Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section id="reach">
      <h2>Contact</h2>
      <p>Email: gauravpal.dev@email.com</p>
    </section>

  </main>

</body>
</html>

Validated Contact Form

<!-- Contact Form with Validation | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Gaurav</title>
</head>

<body>

  <h1>Let's Connect</h1>

  <form action="/send" method="POST">

    <label>Your Name</label>
    <input type="text" name="full_name" required>

    <br>

    <label>Email Address</label>
    <input type="email" name="email_id" required>

    <br>

    <label>Message</label>
    <textarea name="user_message" rows="4" required></textarea>

    <br>

    <button type="submit">Send</button>

  </form>

</body>
</html>

Navigation Bar Layout

<!-- Navigation Bar | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Site Navigation</title>

  <style>
    .menu {
      list-style: none;
      display: flex;
      gap: 15px;
    }

    .menu li a {
      text-decoration: none;
      color: black;
    }
  </style>

</head>

<body>

  <h1>Website Navigation</h1>

  <nav>
    <ul class="menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#profile">About</a></li>
      <li><a href="#work">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

</body>
</html>

Audio Player Demo

<!-- Audio Player | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Demo</title>
</head>

<body>

  <h1>Audio Playback</h1>

  <audio controls>
    <source src="track.mp3" type="audio/mp3">
    Audio not supported in your browser.
  </audio>

</body>
</html>

Video Player Demo

<!-- Video Player | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Demo</title>
</head>

<body>

  <h1>Video Playback</h1>

  <video width="320" controls>
    <source src="sample.mp4" type="video/mp4">
    Video playback not supported.
  </video>

</body>
</html>

Basic List (Unordered)

<!-- Unordered List | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Items</title>
</head>

<body>

  <h1>Grocery List</h1>

  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Fruits</li>
  </ul>

</body>
</html>

Task List (Ordered)

<!-- Ordered List | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Daily Tasks</title>
</head>

<body>

  <h1>Today's Tasks</h1>

  <ol>
    <li>Complete coding practice</li>
    <li>Work on portfolio</li>
    <li>Revise JavaScript</li>
  </ol>

</body>
</html>

Definition List Example

<!-- Description List | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Terms</title>
</head>

<body>

  <h1>Basic Web Concepts</h1>

  <dl>

    <dt>HTML</dt>
    <dd>Used to structure the content of a webpage.</dd>

    <dt>CSS</dt>
    <dd>Used to design and style the webpage layout.</dd>

  </dl>

</body>
</html>

Data Table Example

<!-- Data Table | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Performance</title>
</head>

<body>

  <h1>Student Results Overview</h1>

  <table border="1">

    <thead>
      <tr>
        <th>Student Name</th>
        <th>Score Grade</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Rahul</td>
        <td>A</td>
      </tr>

      <tr>
        <td>Sneha</td>
        <td>B</td>
      </tr>
    </tbody>

  </table>

</body>
</html>

Embedded Map Section

<!-- Map Embed | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Location | Gaurav</title>
</head>

<body>

  <h1>My Location</h1>

  <iframe
    width="100%"
    height="400"
    style="border:0;"
    loading="lazy"
    allowfullscreen
    referrerpolicy="no-referrer-when-downgrade"
    src="https://www.google.com/maps/embed/v1/place?q=Pune&key=YOUR_GOOGLE_MAPS_API_KEY">
  </iframe>

</body>
</html>

Mastering CSS — by Gaurav Pal


Understanding Box Model

<!-- Box Model Demo | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model Demo</title>

  <style>
    .card {
      width: 220px;
      height: 220px;
      padding: 25px;
      border: 8px solid #1e293b;
      margin: 40px;
      background: #38bdf8;
      color: #0f172a;
      font-weight: bold;
    }
  </style>

</head>

<body>

  <div class="card">
    Box model includes margin, border, padding, and content.
  </div>

</body>
</html>

CSS Positioning System

<!-- Positioning Demo | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Positioning Demo</title>

  <style>

    .box-relative {
      position: relative;
      top: 40px;
      left: 40px;
      background: #4ade80;
      padding: 15px;
    }

    .box-absolute {
      position: absolute;
      top: 10px;
      left: 10px;
      background: #f87171;
      padding: 15px;
    }

    .box-fixed {
      position: fixed;
      bottom: 15px;
      right: 15px;
      background: #60a5fa;
      padding: 15px;
    }

  </style>

</head>

<body>

  <div class="box-relative">Relative Element</div>
  <div class="box-absolute">Absolute Element</div>
  <div class="box-fixed">Fixed Element</div>

</body>
</html>

Flexbox Navigation Layout

<!-- Flex Navigation | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Nav</title>

  <style>

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #020617;
      padding: 12px 20px;
    }

    .navbar a {
      color: #e2e8f0;
      text-decoration: none;
      margin: 0 10px;
    }

    .navbar a:hover {
      color: #38bdf8;
    }

  </style>

</head>

<body>

  <nav class="navbar">
    <div>Gaurav</div>
    <div>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Work</a>
      <a href="#">Contact</a>
    </div>
  </nav>

</body>
</html>

Grid-Based Portfolio Layout

<!-- Grid Portfolio | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio Grid</title>

  <style>

    .grid-layout {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
    }

    .project-card {
      background: #f1f5f9;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }

    .project-card img {
      width: 100%;
      border-radius: 10px;
    }

    @media (max-width: 768px) {
      .grid-layout {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .grid-layout {
        grid-template-columns: 1fr;
      }
    }

  </style>

</head>

<body>

  <div class="grid-layout">

    <div class="project-card">
      <img src="project1.jpg" alt="Project Preview">
      <h3>Landing Page</h3>
    </div>

    <div class="project-card">
      <img src="project2.jpg" alt="Project Preview">
      <h3>Portfolio Website</h3>
    </div>

    <div class="project-card">
      <img src="project3.jpg" alt="Project Preview">
      <h3>Dashboard UI</h3>
    </div>

  </div>

</body>
</html>

Responsive Layout System

<!-- Responsive Flex Layout | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive UI</title>

  <style>

    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
    }

    .wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    .card {
      background: #e2e8f0;
      padding: 20px;
      flex: 1 1 30%;
      border-radius: 8px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .card {
        flex: 1 1 45%;
      }
    }

    @media (max-width: 480px) {
      .card {
        flex: 1 1 100%;
      }
    }

  </style>

</head>

<body>

  <div class="wrapper">
    <div class="card">Module 1</div>
    <div class="card">Module 2</div>
    <div class="card">Module 3</div>
  </div>

</body>
</html>

Advanced CSS Selectors Practice

<!-- CSS Selectors Deep Dive | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selectors Lab</title>

  <style>

    /* First paragraph inside container */
    .container > p:first-child {
      color: #16a34a;
    }

    /* Alternate list styling */
    ul li:nth-child(even) {
      background: #f1f5f9;
    }

    /* Target specific input */
    input[type="text"] {
      border: 2px solid #2563eb;
    }

    /* Last paragraph styling */
    .container > p:last-child {
      color: #dc2626;
    }

    /* Hover interaction */
    a:hover {
      color: #f97316;
      text-decoration: underline;
    }

    /* Checked state */
    input:checked {
      accent-color: #22c55e;
    }

  </style>

</head>

<body>

  <div class="container">
    <p>First content block</p>
    <p>Last content block</p>
  </div>

  <ul>
    <li>Option One</li>
    <li>Option Two</li>
    <li>Option Three</li>
  </ul>

  <form>
    <input type="text" placeholder="Enter name">
    <br>
    <input type="checkbox"> Accept Terms
  </form>

</body>
</html>

Transitions & Animations Demo

<!-- Animations & Transitions | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UI Effects</title>

  <style>

    /* Hover transition */
    .hover-box {
      width: 200px;
      height: 200px;
      background: #3b82f6;
      transition: all 0.4s ease;
    }

    .hover-box:hover {
      background: #22c55e;
      transform: scale(1.1);
    }

    /* Keyframe animation */
    @keyframes floatUp {
      0% { transform: translateY(0); }
      50% { transform: translateY(-25px); }
      100% { transform: translateY(0); }
    }

    .animated-box {
      width: 200px;
      height: 200px;
      background: #ef4444;
      animation: floatUp 1s infinite;
      margin-top: 20px;
    }

  </style>

</head>

<body>

  <div class="hover-box"></div>

  <div class="animated-box"></div>

</body>
</html>

CSS Custom Properties (Variables)

<!-- CSS Variables System | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Design Tokens</title>

  <style>

    /* Global design variables */
    :root {
      --clr-primary: #2563eb;
      --clr-accent: #22c55e;
      --text-size: 16px;
      --space: 12px;
    }

    body {
      font-size: var(--text-size);
      background: var(--clr-primary);
      color: #ffffff;
      padding: var(--space);
      font-family: 'Segoe UI', sans-serif;
    }

    .btn {
      background: var(--clr-accent);
      border: none;
      color: #fff;
      padding: var(--space);
      cursor: pointer;
      border-radius: 6px;
    }

    .btn:hover {
      background: #15803d;
    }

  </style>

</head>

<body>

  <h1>Welcome to Gaurav's UI</h1>

  <button class="btn">Explore</button>

</body>
</html>

CSS Utility Functions

<!-- CSS Functions Demo | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Functions Lab</title>

  <style>

    /* Dynamic width using calc() */
    .wrapper {
      width: calc(100% - 60px);
      padding: 30px;
      background: #f1f5f9;
    }

    /* Solid color */
    .box-solid {
      width: 100px;
      height: 100px;
      background: rgb(59, 130, 246);
      margin: 10px;
    }

    /* Transparent color */
    .box-transparent {
      width: 100px;
      height: 100px;
      background: rgba(59, 130, 246, 0.5);
      margin: 10px;
    }

    /* Responsive sizing */
    .box-responsive {
      width: min(320px, 60%);
      height: 180px;
      background: #0ea5e9;
    }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="box-solid"></div>

    <div class="box-transparent"></div>

    <div class="box-responsive"></div>

  </div>

</body>
</html>

Image Effects using CSS Filters

<!-- Image Filters Demo | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filter Effects</title>

  <style>

    .preview-img {
      width: 320px;
      transition: filter 0.4s ease, transform 0.4s ease;
    }

    .preview-img:hover {
      filter: grayscale(100%) contrast(140%) blur(4px);
      transform: scale(1.05);
    }

  </style>

</head>

<body>

  <h1>Image Hover Effects</h1>

  <img src="sample.jpg" alt="Preview" class="preview-img">

</body>
</html>

Flexbox & Grid Layout System

<!-- Layout System | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout Playground</title>

  <style>

    /* Flexbox section */
    .flex-layout {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;
      background: #2563eb;
    }

    .flex-box {
      width: 100px;
      height: 100px;
      background: #facc15;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    /* Grid section */
    .grid-layout {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 20px;
    }

    .grid-card {
      background: #ef4444;
      padding: 20px;
      text-align: center;
      color: #fff;
      border-radius: 8px;
    }

  </style>

</head>

<body>

  <h1>Layout Techniques</h1>

  <!-- Flexbox Example -->
  <div class="flex-layout">
    <div class="flex-box">A</div>
    <div class="flex-box">B</div>
    <div class="flex-box">C</div>
  </div>

  <!-- Grid Example -->
  <div class="grid-layout">
    <div class="grid-card">Card 1</div>
    <div class="grid-card">Card 2</div>
    <div class="grid-card">Card 3</div>
  </div>

</body>
</html>

Typography & Custom Fonts

<!-- Typography Setup | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typography Demo</title>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Inter:wght@300;700&display=swap" rel="stylesheet">

  <style>

    body {
      font-family: 'Inter', sans-serif;
      background: #f8fafc;
      padding: 20px;
    }

    h1 {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      color: #0f172a;
    }

    p {
      font-size: 18px;
      line-height: 1.7;
      color: #334155;
    }

  </style>

</head>

<body>

  <h1>Modern Typography</h1>

  <p>
    This layout demonstrates how custom fonts and proper spacing improve readability and design.
  </p>

</body>
</html>

Styled Forms & Inputs

<!-- Form Styling | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Sign Up Form</title>

  <style>
    body {
      font-family: 'Inter', sans-serif;
      background-color: #f0f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }

    .form-card {
      background: #ffffff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 400px;
    }

    .form-card h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #1e293b;
    }

    .form-card label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: #334155;
    }

    .form-card input[type="text"],
    .form-card input[type="email"],
    .form-card input[type="password"] {
      width: 100%;
      padding: 12px;
      margin-bottom: 16px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      transition: border 0.3s ease;
    }

    .form-card input[type="text"]:focus,
    .form-card input[type="email"]:focus,
    .form-card input[type="password"]:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 6px rgba(37, 99, 235, 0.3);
    }

    .form-card input[type="submit"] {
      width: 100%;
      background-color: #2563eb;
      color: #fff;
      padding: 12px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .form-card input[type="submit"]:hover {
      background-color: #1d4ed8;
      transform: translateY(-2px);
    }

  </style>

</head>

<body>

  <form class="form-card">
    <h1>Sign Up</h1>

    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" placeholder="Enter your full name" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>

    <label for="password">Password</label>
    <input type="password" id="password" name="password" placeholder="Enter your password" required>

    <input type="submit" value="Create Account">
  </form>

</body>
</html>

Box & Text Shadows

<!-- Shadows | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Effects</title>

  <style>
    body {
      font-family: 'Inter', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
      gap: 40px;
      background: #f1f5f9;
    }

    h1 {
      color: #1e293b;
      text-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    }

    .shadow-box {
      width: 300px;
      height: 180px;
      background: #f59e0b;
      border-radius: 12px;
      box-shadow: 8px 8px 20px rgba(0,0,0,0.25);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: #fff;
      font-size: 18px;
    }
  </style>

</head>

<body>

  <h1>Shadow Heading</h1>

  <div class="shadow-box">Shadow Box</div>

</body>
</html>

Backgrounds & Gradients

<!-- Background & Gradient | Gaurav Pal -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Demo</title>

  <style>
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
    }

    .solid-bg {
      width: 100%;
      height: 250px;
      background-color: #2563eb;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 600;
      font-size: 24px;
    }

    .gradient-bg {
      width: 100%;
      height: 250px;
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1e293b;
      font-weight: 600;
      font-size: 24px;
    }
  </style>

</head>

<body>

  <div class="solid-bg">Solid Background</div>
  <div class="gradient-bg">Gradient Background</div>

</body>
</html>

Overflow and Scrollable Content

<!-- Overflow & Scrolling | Portfolio Ready -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollable Content</title>

  <style>
    body {
      font-family: 'Inter', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f0f4f8;
      padding: 20px;
    }

    .scroll-box {
      width: 350px;
      height: 200px;
      padding: 20px;
      border: 2px solid #34495e;
      border-radius: 8px;
      overflow-y: auto;
      background-color: #ffffff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .scroll-box p {
      margin-bottom: 12px;
      line-height: 1.5;
      color: #1e293b;
    }
  </style>
</head>

<body>
  <div class="scroll-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut turpis felis.</p>
    <p>Maecenas sed augue id libero hendrerit sollicitudin.</p>
    <p>Fusce id metus ut justo tristique lacinia at eget tortor.</p>
    <p>Curabitur sit amet convallis urna. Nulla et urna vitae ipsum porttitor gravida.</p>
    <p>Additional content to demonstrate scrolling effect.</p>
  </div>
</body>
</html>

Positioning and Layering with z-index

<!-- Layered Boxes | z-index Demo -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>z-index Layering</title>

  <style>
    body {
      position: relative;
      min-height: 400px;
      background: #f1f5f9;
      padding: 50px;
    }

    .box {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 12px;
      opacity: 0.9;
    }

    .box1 {
      background-color: #ff6347;
      top: 50px;
      left: 50px;
      z-index: 1;
    }

    .box2 {
      background-color: #2ecc71;
      top: 100px;
      left: 100px;
      z-index: 2;
    }

    .box3 {
      background-color: #3498db;
      top: 150px;
      left: 150px;
      z-index: 3;
    }
  </style>
</head>

<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

Pseudo-classes and Pseudo-elements

<!-- Pseudo-classes & Pseudo-elements Demo -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudo Demo</title>

  <style>
    body {
      font-family: 'Inter', sans-serif;
      padding: 50px;
      background: #f0f4f8;
    }

    h1::after {
      content: " - Welcome to my website!";
      font-size: 16px;
      color: #7f8c8d;
      display: block;
      margin-top: 8px;
    }

    a {
      text-decoration: none;
      color: #2563eb;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    a:hover {
      color: #e74c3c;
    }
  </style>
</head>

<body>
  <h1>Heading</h1>
  <a href="#">Hover over me!</a>
</body>
</html>

Viewport Units

<!-- Viewport Units Demo | Responsive Boxes -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Viewport Units</title>

  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
      font-family: 'Inter', sans-serif;
    }

    .full-screen {
      width: 100vw;
      height: 100vh;
      background-color: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24px;
      font-weight: 600;
    }

    .half-width {
      width: 50vw;
      height: 50vh;
      background-color: #2ecc71;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      margin: auto;
    }
  </style>
</head>

<body>
  <div class="full-screen">Full Viewport</div>
  <div class="half-width">Half Viewport</div>
</body>
</html>

Let's Learn JavaScript


Advanced Functions (Higher-Order Functions)

<!-- Higher-Order Functions Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Higher-Order Functions</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h1>Higher-Order Function Example</h1>
  <button id="clickMeBtn">Click Me</button>

  <script>
    function createMultiplier(multiplier) {
      return function (num) {
        return num * multiplier;
      };
    }

    const multiplyBy2 = createMultiplier(2);
    const multiplyBy3 = createMultiplier(3);

    document.getElementById("clickMeBtn").addEventListener("click", () => {
      alert("5 multiplied by 2 is " + multiplyBy2(5));
      alert("5 multiplied by 3 is " + multiplyBy3(5));
    });
  </script>
</body>
</html>

Asynchronous JavaScript (Fetching Data)

<!-- Async/Await Fetch Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async JavaScript</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #0056b3;
    }
    #data {
      margin-top: 20px;
      font-size: 18px;
      color: #1e293b;
    }
  </style>
</head>
<body>
  <h1>Asynchronous JavaScript Example</h1>
  <button id="loadDataBtn">Load Data</button>
  <div id="data"></div>

  <script>
    document.getElementById("loadDataBtn").addEventListener("click", async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await response.json();
        const user = data[0];
        document.getElementById("data").innerHTML = 
          `<h2>${user.name}</h2><p>${user.email}</p>`;
      } catch (error) {
        document.getElementById("data").innerHTML = "<p>Error fetching data!</p>";
      }
    });
  </script>
</body>
</html>

DOM Manipulation

<!-- DOM Manipulation Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Manipulation</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #0056b3;
    }
    #text {
      margin-top: 20px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>DOM Manipulation Example</h1>
  <button id="changeTextBtn">Change Text</button>
  <p id="text">This is the original text.</p>

  <script>
    document.getElementById("changeTextBtn").addEventListener("click", () => {
      document.getElementById("text").innerText = "The text has been changed!";
    });
  </script>
</body>
</html>

JavaScript Arrays (Filtering and Mapping)

<!-- Arrays Filtering & Mapping Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Arrays</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #28a745;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #218838;
    }
    ul {
      margin-top: 20px;
      list-style-type: none;
      padding: 0;
      font-size: 18px;
      color: #1e293b;
    }
  </style>
</head>
<body>
  <h1>JavaScript Arrays Example</h1>
  <button id="filterBtn">Show Adults</button>
  <ul id="list"></ul>

  <script>
    const people = [
      { name: "Alice", age: 25 },
      { name: "Bob", age: 17 },
      { name: "Charlie", age: 30 },
      { name: "David", age: 15 },
    ];

    document.getElementById("filterBtn").addEventListener("click", () => {
      const adults = people.filter(person => person.age >= 18);
      const list = document.getElementById("list");
      list.innerHTML = "";
      adults.forEach(person => {
        const li = document.createElement("li");
        li.textContent = `${person.name}, Age: ${person.age}`;
        list.appendChild(li);
      });
    });
  </script>
</body>
</html>

Object-Oriented JavaScript (Creating a Car Object)

<!-- Objects and OOP Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OOP in JavaScript</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #17a2b8;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #138496;
    }
    #carInfo {
      margin-top: 20px;
      font-size: 18px;
      color: #1e293b;
    }
  </style>
</head>
<body>
  <h1>Object-Oriented JavaScript Example</h1>
  <button id="showCarInfo">Show Car Info</button>
  <p id="carInfo"></p>

  <script>
    class Car {
      constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
      }
      getCarInfo() {
        return `${this.year} ${this.make} ${this.model}`;
      }
    }

    const myCar = new Car("Toyota", "Corolla", 2021);

    document.getElementById("showCarInfo").addEventListener("click", () => {
      document.getElementById("carInfo").innerText = myCar.getCarInfo();
    });
  </script>
</body>
</html>

Advanced JavaScript Concepts


JavaScript Scope and Hoisting

<!-- Scope & Hoisting Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scope and Hoisting</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #0056b3;
    }
    #result {
      margin-top: 20px;
      font-size: 18px;
      color: #1e293b;
    }
  </style>
</head>
<body>
  <h1>Understanding JavaScript Scope and Hoisting</h1>
  <button id="testHoistingBtn">Test Hoisting</button>
  <p id="result"></p>

  <script>
    function hoistedFunction() {
      alert("This function is hoisted!");
    }

    document.getElementById("testHoistingBtn").addEventListener("click", () => {
      try {
        hoistedFunction(); // Works because of hoisting
        var hoistedVar = "This is a hoisted variable!";
        document.getElementById("result").innerText = hoistedVar;
      } catch (error) {
        document.getElementById("result").innerText = error.message;
      }
    });

    // Hoisting behavior
    console.log(myVar); // undefined
    var myVar = "This is a var variable.";

    // console.log(myLet); // Uncommenting will throw ReferenceError
    let myLet = "This is a let variable.";
  </script>
</body>
</html>

Error Handling

<!-- JavaScript Error Handling Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Error Handling</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #ff6347;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #e53e3e;
    }
    #error-message {
      margin-top: 20px;
      color: red;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>JavaScript Error Handling Example</h1>
  <button id="causeErrorBtn">Cause an Error</button>
  <p id="error-message"></p>

  <script>
    document.getElementById("causeErrorBtn").addEventListener("click", () => {
      try {
        // Simulating an error
        someFunction(); // Function deliberately undefined
      } catch (error) {
        document.getElementById("error-message").innerText = `Error: ${error.message}`;
      }
    });

    function someFunction() {
      throw new Error("This function is undefined!");
    }
  </script>
</body>
</html>

JavaScript Modules

<!-- JavaScript Modules Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Modules</title>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f0f4f8;
    }
    button {
      padding: 10px 20px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: #218838;
    }
  </style>
</head>
<body>
  <h1>JavaScript Module Example</h1>
  <button id="greetBtn">Say Hello</button>

  <script type="module">
    // greet.js file must exist in the same folder
    import { greet } from './greet.js';

    document.getElementById("greetBtn").addEventListener("click", () => {
      alert(greet('John'));
    });
  </script>
</body>
</html>

<!-- greet.js -->
<script type="module">
// greet.js
export function greet(name) {
  return `Hello, ${name}!`;
}
</script>

More Advanced JavaScript Examples


JavaScript Local Storage and Session Storage

<!-- Local & Session Storage Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local & Session Storage</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; margin: 5px; background-color: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; }
    button:hover { background-color: #0056b3; }
    #result { margin-top: 20px; font-size: 18px; color: #1e293b; }
  </style>
</head>
<body>
  <h1>Local Storage & Session Storage</h1>
  <button id="saveBtn">Save to Local Storage</button>
  <button id="saveSessionBtn">Save to Session Storage</button>
  <button id="getStorageBtn">Get Stored Data</button>
  <div id="result"></div>

  <script>
    document.getElementById("saveBtn").addEventListener("click", () => {
      localStorage.setItem("username", "Alice");
    });

    document.getElementById("saveSessionBtn").addEventListener("click", () => {
      sessionStorage.setItem("sessionUser", "Bob");
    });

    document.getElementById("getStorageBtn").addEventListener("click", () => {
      const username = localStorage.getItem("username");
      const sessionUser = sessionStorage.getItem("sessionUser");
      document.getElementById("result").innerHTML = `LocalStorage Username: ${username}<br>SessionStorage User: ${sessionUser}`;
    });
  </script>
</body>
</html>

Regular Expressions (RegEx)

<!-- RegEx Email Validation Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RegEx Example</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #ff6347; color: white; border: none; border-radius: 6px; cursor: pointer; }
    button:hover { background-color: #e53e3e; }
    #message { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>RegEx Email Validation</h1>
  <input type="text" id="emailInput" placeholder="Enter email" />
  <button id="validateBtn">Validate Email</button>
  <p id="message"></p>

  <script>
    document.getElementById("validateBtn").addEventListener("click", () => {
      const email = document.getElementById("emailInput").value;
      const pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$/;
      document.getElementById("message").innerText = pattern.test(email) ? "Valid email address!" : "Invalid email address.";
    });
  </script>
</body>
</html>

JavaScript Date and Time

<!-- Date and Time Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Date and Time</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; }
    button:hover { background-color: #0056b3; }
    #date { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Current Date and Time</h1>
  <button id="showDateBtn">Show Date & Time</button>
  <p id="date"></p>

  <script>
    document.getElementById("showDateBtn").addEventListener("click", () => {
      const now = new Date();
      document.getElementById("date").innerText = `Current Date & Time: ${now.toLocaleDateString()} ${now.toLocaleTimeString()}`;
    });
  </script>
</body>
</html>

JavaScript Fetch API

<!-- Fetch API Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch API</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; }
    button:hover { background-color: #218838; }
    #data { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Fetch API Example</h1>
  <button id="fetchDataBtn">Fetch Data</button>
  <div id="data"></div>

  <script>
    document.getElementById("fetchDataBtn").addEventListener("click", () => {
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(data => {
          document.getElementById("data").innerHTML = `Title: ${data.title}<br>Body: ${data.body}`;
        })
        .catch(err => {
          document.getElementById("data").innerText = "Error fetching data: " + err.message;
        });
    });
  </script>
</body>
</html>

JavaScript Closures and Callbacks

<!-- Closures & Callbacks Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Closures & Callbacks</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #ff6347; color: white; border: none; border-radius: 6px; cursor: pointer; }
    button:hover { background-color: #e53e3e; }
    #message { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Closures & Callbacks Example</h1>
  <button id="greetBtn">Click to Greet</button>
  <p id="message"></p>

  <script>
    function greetingMessage(name) {
      return function(msg) {
        return `${msg}, ${name}!`;
      };
    }
    const greet = greetingMessage("Alice");

    document.getElementById("greetBtn").addEventListener("click", () => {
      document.getElementById("message").innerText = greet("Good Morning");
    });
  </script>
</body>
</html>

Destructuring Assignment

<!-- Destructuring Assignment Demo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Destructuring Assignment</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; }
    button:hover { background-color: #2980b9; }
    #result { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Destructuring Assignment Example</h1>
  <button id="showResultBtn">Show Values</button>
  <div id="result"></div>

  <script>
    const user = { name: "John", age: 30, city: "New York" };
    document.getElementById("showResultBtn").addEventListener("click", () => {
      const { name, age, city } = user;
      document.getElementById("result").innerText = `Name: ${name}, Age: ${age}, City: ${city}`;
    });
  </script>
</body>
</html>

JavaScript Advanced Examples


Advanced Array Methods

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Array Methods</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #c0392b; }
    #result { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Advanced Array Methods</h1>
  <button id="processArrayBtn">Process Array</button>
  <div id="result"></div>

  <script>
    const numbers = [1, 2, 3, 4, 5];

    document.getElementById("processArrayBtn").addEventListener("click", () => {
      const squared = numbers.map(n => n * n);
      const evens = numbers.filter(n => n % 2 === 0);
      const sum = numbers.reduce((total, n) => total + n, 0);

      document.getElementById("result").innerHTML = `
        Squared Numbers: ${squared.join(", ")}<br>
        Even Numbers: ${evens.join(", ")}<br>
        Sum: ${sum}
      `;
    });
  </script>
</body>
</html>

Web APIs and DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web APIs & DOM</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #8e44ad; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #732d91; }
    #message { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Web APIs & DOM Manipulation</h1>
  <button id="changeColorBtn">Change Background Color</button>
  <div id="message"></div>

  <script>
    document.getElementById("changeColorBtn").addEventListener("click", () => {
      document.body.style.backgroundColor = "lightblue";
      document.getElementById("message").innerText = "Background color changed!";
    });
  </script>
</body>
</html>

JavaScript Fetch API

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch API</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #218838; }
    #data { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Fetch API Example</h1>
  <button id="fetchDataBtn">Fetch Data</button>
  <div id="data"></div>

  <script>
    document.getElementById("fetchDataBtn").addEventListener("click", () => {
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(res => res.json())
        .then(data => {
          document.getElementById("data").innerHTML = `Title: ${data.title}<br>Body: ${data.body}`;
        })
        .catch(err => {
          document.getElementById("data").innerText = "Error fetching data: " + err.message;
        });
    });
  </script>
</body>
</html>

JavaScript Closures and Callbacks

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Closures and Callbacks</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #ff6347; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #e53e3e; }
    #message { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Closures and Callbacks Example</h1>
  <button id="greetBtn">Click to Greet</button>
  <p id="message"></p>

  <script>
    function greetingMessage(name) {
      return function(message) {
        return `${message}, ${name}!`;
      }
    }

    const greet = greetingMessage("Alice");

    document.getElementById("greetBtn").addEventListener("click", () => {
      const message = greet("Good Morning");
      document.getElementById("message").innerText = message;
    });
  </script>
</body>
</html>

Destructuring Assignment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Destructuring Assignment</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #2980b9; }
    #result { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Destructuring Assignment Example</h1>
  <button id="showResultBtn">Show Destructured Values</button>
  <div id="result"></div>

  <script>
    const user = { name: "John", age: 30, city: "New York" };
    
    document.getElementById("showResultBtn").addEventListener("click", () => {
      const { name, age, city } = user;
      document.getElementById("result").innerText = `Name: ${name}, Age: ${age}, City: ${city}`;
    });
  </script>
</body>
</html>

Advanced Array Methods

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Array Methods</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #c0392b; }
    #result { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Advanced Array Methods Example</h1>
  <button id="processArrayBtn">Process Array</button>
  <div id="result"></div>

  <script>
    const numbers = [1, 2, 3, 4, 5];
    
    document.getElementById("processArrayBtn").addEventListener("click", () => {
      const squared = numbers.map(n => n * n);
      const evens = numbers.filter(n => n % 2 === 0);
      const sum = numbers.reduce((total, n) => total + n, 0);

      document.getElementById("result").innerHTML = `
        Squared Numbers: ${squared.join(", ")}<br>
        Even Numbers: ${evens.join(", ")}<br>
        Sum: ${sum}
      `;
    });
  </script>
</body>
</html>

Web APIs and DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web APIs and DOM Manipulation</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f0f4f8; }
    button { padding: 10px 20px; background-color: #8e44ad; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px; }
    button:hover { background-color: #732d91; }
    #message { margin-top: 20px; font-size: 18px; }
  </style>
</head>
<body>
  <h1>Web APIs and DOM Manipulation Example</h1>
  <button id="changeColorBtn">Change Background Color</button>
  <div id="message"></div>

  <script>
    document.getElementById("changeColorBtn").addEventListener("click", () => {
      document.body.style.backgroundColor = "lightblue";
      document.getElementById("message").innerText = "Background color changed!";
    });
  </script>
</body>
</html>

बधाई हो!

अब आपने JavaScript के मुख्य कॉन्सेप्ट्स को समझ लिया है: Closures, Callbacks, Destructuring, Advanced Array Methods, और DOM manipulation! Web development में आपकी नींव मज़बूत है—अपनी स्किल्स को और पक्का करने के लिए असली दुनिया के प्रोजेक्ट्स बनाते रहें।

अगले कदम

  • Personal Portfolio Website
  • Task Manager App
  • Interactive Photo Gallery
  • Weather App
  • Calculator App
  • E-commerce Product Page
  • Quiz Game
  • Blog Platform
  • Real-Time Chat App
  • Recipe Finder App

आगे बढ़ने के लिए टिप्स

  • रोज़ाना प्रैक्टिस करें: कोड की हर लाइन आपको और मज़बूत बनाती है।
  • एक्सपेरिमेंट करें: नई लाइब्रेरीज, फ्रेमवर्क्स और कोडिंग पैटर्न्स आज़माएँ।
  • प्रोजेक्ट्स बनाएँ: आपका पोर्टफोलियो नए मौकों का दरवाज़ा है।
  • जिज्ञासु बने रहें: Web development लगातार बदल रहा है; सीखते रहें।

आगे बढ़ते रहें! 🚀

अब आप शानदार वेबसाइट्स और एप्लीकेशन्स बनाने के लिए पूरी तरह से तैयार हैं। कोडिंग करते रहें, मोटिवेटेड रहें, और सबसे ज़रूरी बात—इस प्रोसेस का मज़ा लें!